<template>
  <navbar title="编辑个人资料" :isBack="true" :border="true"></navbar>
  <view class="item flex-space-between">
    <view class="label"> 个人头像 </view>
    <view class="right flex" @click="upload">
      <image class="pic" mode="aspectFill" :src="info.user.avatar"></image>
    </view>
  </view>
  <!-- <loading v-if="!info.isShow"></loading> -->
  <customForm ref="formRef" v-if="info.isShow" :formList="info.formList" @change="customChange"></customForm>
  <view class="btn" v-if="info.isShow" @click="saveClick">保存</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getInfoData, getEditInfo, getInfo } from '@/service/api/user'
import customForm from '@/components/form/custom.vue'
import userPinia from '@/store/user'
import tools from '@/utils/tools'
const user = userPinia()

const userInfo = JSON.parse(user.$state.userInfo)

let params = {
  昵称: 'nick_name',
  姓名: 'name',
  手机号码: 'mobile',
  性别: 'sex',
  证件类型: 'card_type',
  证件号码: 'id_card',
  出生日期: 'birthday',
  衣服尺码: 'size',
  紧急联系人: 'contacts',
  紧急联系人电话: 'contact_no',
  血型: 'blood_type'
}

let info = reactive({
  isShow: false,
  user: userInfo,
  formList: [
    {
      model: '昵称',
      prop: false,
      type: 1,
      value: ''
    },
    {
      model: '姓名',
      prop: false,
      type: 1,
      value: ''
    },
    {
      model: '手机号码',
      prop: false,
      type: 1,
      value: ''
    },
    {
      child: [
        {
          label: '男'
        },
        {
          label: '女'
        }
      ],
      model: '性别',
      prop: false,
      type: 7,
      value: ''
    },
    {
      child: [],
      model: '证件类型',
      prop: false,
      type: 3,
      value: ''
    },
    {
      model: '证件号码',
      prop: false,
      type: 1,
      value: ''
    },
    {
      model: '出生日期',
      placeholder: '',
      prop: false,
      type: 4,
      value: ''
    },
    {
      child: [],
      model: '衣服尺码',
      prop: false,
      type: 3,
      value: ''
    },
    {
      model: '紧急联系人',
      prop: false,
      type: 1,
      value: ''
    },
    {
      model: '紧急联系人电话',
      prop: false,
      type: 1,
      value: ''
    },
    {
      child: [],
      model: '血型',
      prop: false,
      type: 3,
      value: ''
    }
  ],
  params: {}
})

// 获取组件实例
const formRef = ref(null)

// 上传头像
const upload = () => {
  tools.chooseImage().then((res: string[]) => {
    tools.getOssUrl<string[]>(res).then((url: any) => {
      info.user.avatar = url
      info.params['avatar'] = url
    })
  })
}

// 保存按钮
const saveClick = () => {
  formRef.value.confirm()
}

// 表单参数回调
const customChange = (e: { value: { model: string; value: string | number }[] }) => {
  e.value.forEach((item) => {
    if (params[item.model] == 'sex') {
      item.value = item.value == '男' ? 1 : 2
    }
    info.params[params[item.model]] = item.value
  })
  // 修改个人信息
  getEditInfoApi()
}

// 个人信息数据
const getInfoDataApi = async () => {
  const { msg } = await getInfoData()
  // 1 单人 2 多人 3 个人中心
  tools.setStorage<number>('entryType', 3)

  info.formList[4].child = msg.card_type
  info.formList[7].child = msg.sizes
  info.formList[10].child = msg.blood
  let obj = {}
  for (let uKey in userInfo) {
    Object.entries(params).forEach(([key, value]) => {
      if (uKey == value) {
        if (uKey == 'sex') return (obj[uKey] = userInfo[uKey] == 0 || userInfo[uKey] == 1 ? '男' : '女')
        obj[uKey] = userInfo[uKey]
      }
    })
  }

  info.formList.forEach((item) => {
    item.value = obj[params[item.model]]
  })

  info.isShow = true
}

// 修改个人信息
const getEditInfoApi = async () => {
  const { code, msg } = await getEditInfo(info.params)
  tools.showToast(msg)
  if (code == 1) return getInfoApi()
}

// 获取个人信息
const getInfoApi = async () => {
  const { code, msg } = await getInfo()
  if (code == 1) return tools.setStorage<string>('userInfo', JSON.stringify(msg)), (user.$state.userInfo = JSON.stringify(msg)), tools.getPage()
}

onLoad(() => {
  // 个人信息数据
  getInfoDataApi()
})
</script>

<style lang="scss" scoped>
.item {
  width: 682rpx;
  padding-bottom: 30rpx;
  align-items: flex-start;
  margin: 34rpx auto 0 auto;
  border-bottom: 1px solid #eee;
  .label {
    width: 184rpx;
    height: 40rpx;
    font-size: 28rpx;
  }
  .right {
    flex: 1;
    font-size: 28rpx;
    justify-content: flex-end;
    .pic {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }
}
.btn {
  color: #fff;
  width: 690rpx;
  bottom: 42rpx;
  height: 100rpx;
  font-size: 32rpx;
  position: relative;
  text-align: center;
  line-height: 100rpx;
  border-radius: 6rpx;
  margin: 48rpx auto 0 auto;
  background: rgba(230, 66, 94);
}
</style>
